<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="dark light">
    <title>{% if bdsp %}BDSP {% elif swsh %}SWSH {% elif g3 %}Gen3 {%elif home %}Cappy {% else %}PLA {% endif %}{% block title %}Web RNG Tools{% endblock %}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='css/chosen.css') }}" rel="stylesheet">
	<script type="module" src="static/js/jquery.min.mjs"></script>
	<script type="module">
	</script>
	<script type="module" src="static/js/chosen.jquery.min.mjs"></script>
	<script type="module">
	</script>
    {% block head %}
    {% endblock %}
    <script type="module">
        // Inlined for speed

        // Get the users theme preference
        // First checks for any preference set in local storage
        // Then for dark mode preference at the OS level
        const getThemePreference = () => {
        if (localStorage.getItem("pla-theme")) {
            return localStorage.getItem("pla-theme");
        } else {
            return window.matchMedia("(prefers-color-scheme: dark)").matches
            ? "dark"
            : "light";
        }
        };

        const setThemePreference = () => {
            localStorage.setItem("pla-theme", theme);
            applyTheme();
        };

        const applyTheme = () => {
            document.firstElementChild.setAttribute("color-scheme", theme);
            document.querySelector(".theme-toggle")?.setAttribute("aria-live", theme);
            document.querySelector(".theme-toggle-light")?.classList.toggle("hidden", theme === "dark");
            document.querySelector(".theme-toggle-dark")?.classList.toggle("hidden", theme === "light");
        };

        let theme = getThemePreference();

        // set early so no page flashes
        applyTheme();

        window.onload = () => {
            // set on load so screen readers can see latest value on the button
            applyTheme();

            document.querySelector(".theme-toggle").addEventListener("click", (e) => {
                theme = theme === "light" ? "dark" : "light";
                setThemePreference();
            });
        };

        window
        .matchMedia("(prefers-color-scheme: dark)")
        .addEventListener("change", ({ matches: isDark }) => {
            theme = isDark ? "dark" : "light";
            setThemePreference();
        });
    </script>
	<script src="https://kit.fontawesome.com/acd232d529.js" crossorigin="anonymous"></script>
</head>

<body{% block bodyclass %}{% endblock %}>
    <header class="pla-header space-between">
        {%if bdsp %}
		<h1 class="pla-heading"><span class="pla-heading-highlight">BDSP</span> {{ self.title() }}</h1>
		{% elif swsh %}
		<h1 class="pla-heading"><span class="pla-heading-highlight">SWSH</span> {{ self.title() }}</h1>
        {% elif g3 %}
		<h1 class="pla-heading"><span class="pla-heading-highlight">GEN3</span> {{ self.title() }}</h1>
        {% elif home %}
		<h1 class="pla-heading"><span class="pla-heading-highlight">CAPPY'S</span> {{ self.title() }}</h1>
		{% else %}
		<h1 class="pla-heading"><span class="pla-heading-highlight">PLA</span> {{ self.title() }}</h1>
		{% endif %}

        <button class="theme-toggle" id="theme-toggle" title="Toggles light and dark mode" aria-live="light">
            <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
                <g class="theme-toggle-light hidden">
                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                </g>
                <g class="theme-toggle-dark hidden">
                    <circle cx="12" cy="12" r="5"></circle>
                    <line x1="12" y1="1" x2="12" y2="3"></line>
                    <line x1="12" y1="21" x2="12" y2="23"></line>
                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                    <line x1="1" y1="12" x2="3" y2="12"></line>
                    <line x1="21" y1="12" x2="23" y2="12"></line>
                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                </g>
            </svg>
        </button>
    </header>

    {% if bdsp %}
    {% include 'nav/nav-bdsp.html' %}
	{% elif swsh %}
	{% include 'nav/nav-swsh.html' %}
    {% elif g3 %}
	{% include 'nav/nav-g3.html' %}
    {% elif home %}
	{% include 'nav/nav-home.html' %}
    {% else %}
    {% include 'nav/nav-python.html' %}
    {% endif %}
    
    {% block base %}
    <main class="pla-main">
        {% block main %}
        {% endblock %}
    </main>
    {% endblock %}

    <footer class="pla-footer">
        <!-- <a href="https://discord.gg/2JSZnm8GHf" target="_blank">Discord</a> -->
        <a href="https://www.youtube.com/channel/UCrItwn5zVd2jinwkznYn-dQ" target="_blank">YouTube Guides</a>
        <a href="https://github.com/capitalism-sudo/pla-multi-checker/wiki" target="_blank">Wiki</a>
        <a href="https://www.bilibili.com/video/BV1CsNceVE5B/" target="_blank">Bilibili梦妖惊吓同消演示</a>
        <a href="https://www.bilibili.com/video/BV1Lu9vYAEVE/" target="_blank">Bilibili完整刷闪流程演示</a>
    </footer>

    <div class="pla-background-1"></div>
    <div class="pla-background-2"></div>

    {% block templates %}
    {% endblock %}
    
    <template data-pla-spinner>
        <div class="pla-spinner lds-roller">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </template>
    
    {% block script %}
    {% endblock %}
</body%>

</html>